<!--
 * 输入框
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <input
        class="pure-input"
        :class="classes"
        :style="styles"
        :controlled="false"
        :type="type"
        :textContentType="textContentType"
        :password="password"
        :placeholder="placeholder"
        :placeholderStyle="placeholderStyle"
        :placeholderClass="placeholderClass"
        :disabled="disabled"
        :maxlength="maxlength"
        :cursorSpacing="cursorSpacing"
        :focus="focus"
        :confirmType="confirmType"
        :confirmHold="confirmHold"
        :cursor="cursor"
        :cursorColor="cursorColor"
        :selectionStart="selectionStart"
        :selectionEnd="selectionEnd"
        :adjustPosition="adjustPosition"
        :autoBlur="autoBlur"
        :ignoreCompositionEvent="ignoreCompositionEvent"
        :alwaysEmbed="alwaysEmbed"
        :holdKeyboard="holdKeyboard"
        :safePasswordCertPath="safePasswordCertPath"
        :safePasswordLength="safePasswordLength"
        :safePasswordTimeStamp="safePasswordTimeStamp"
        :safePasswordNonce="safePasswordNonce"
        :safePasswordSalt="safePasswordSalt"
        :safePasswordCustomHash="safePasswordCustomHash"
        :randomNumber="randomNumber"
        :alwaysSystem="alwaysSystem"
        :inputmode="inputmode"
        :value="modelValue"
        @input="onInput"
        @focus="onFocus"
        @blur="onBlur"
        @confirm="onConfirm"
        @keyboardheightchange="onKeyboardHeightChange"
    />
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: ["input", "focus", "blur", "confirm", "keyboardHeightChange", "update:modelValue"],
        inject: {
            // Field 组件的 blur 事件
            onFieldBlur: {
                from: "onFieldBlur",
                default: () => {
                    return () => {};
                },
            },

            // Field 组件的 change 事件
            onFieldChange: {
                from: "onFieldChange",
                default: () => {
                    return () => {};
                },
            },
        },
        data() {
            return {};
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 禁用
                if (this.disabled) {
                    classes.push(this.disabledClass);
                }

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },
        },
        watch: {
            // 监听 modelValue 的变化
            modelValue(newValue, oldValue) {
                // 如果值发生变化，并且表单字段验证时机为 change，则触发字段验证
                if (newValue !== oldValue) {
                    this.onFieldChange();
                }
            },
        },
        methods: {
            // 当键盘输入时，触发input事件
            onInput(e) {
                this.$emit("input", e);
                this.updateModelValue(this.formatValue(e.detail.value));
            },

            // 输入框聚焦时触发
            onFocus(e) {
                this.$emit("focus", e);
                this.updateModelValue(this.formatValue(e.detail.value));
            },

            // 输入框失焦时触发
            onBlur(e) {
                this.$emit("blur", e);
                this.updateModelValue(this.formatValue(e.detail.value));
                this.onFieldBlur();
            },

            // 点击完成按钮时触发
            onConfirm(e) {
                this.$emit("confirm", e);
                this.updateModelValue(this.formatValue(e.detail.value));
            },

            // 键盘高度发生变化的时候触发此事件
            onKeyboardHeightChange(e) {
                this.$emit("keyboardHeightChange", e);
            },

            // 同步更新 modelValue
            updateModelValue(value) {
                if (this.disabled) return;
                this.$emit("update:modelValue", value);
            },

            // 格式化输入框的值
            // 因为数字也会被转成字符串，所以需要格式化一下
            formatValue(value) {
                if (this.type === "number" || this.type === "digit") {
                    if (this.modelValue === null || this.modelValue === undefined || this.modelValue === "") return null;
                    return Number(value);
                }
                return value;
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
